
<template>
  <div>
    <el-input v-model.lazy="data[params.field+'_show_value']" :readonly="true" size="mini">
      <template slot="prepend">
        <el-button icon="el-icon-s-grid" @click="selectorShow(item)">{{ data[params.field] }}</el-button>
      </template>
      <template slot="append">
        <el-button style="color:red" icon="el-icon-circle-close" circle @click="clearSelector(item.en)" />
      </template>
    </el-input>
    <selector ref="selectorDialog" @confirm="selectorConfirm"/>
  </div>
</template>

<script>
import Selector from '@/views/template/components/selector.vue'

export default {
  name: 'FormSelector',
  components: {
    Selector
  },
  props: {
    params: Object
  },
  data() {
    return {
      data: {},
      item: {}
    }
  },
  watch: {
    params() {
      this.load()
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      const { data, props } = this.params
      this.data = data
      this.item = props.item
    },
    selectorShow(item) {
      this.$refs.selectorDialog.show(item, 1)
    },
    selectorConfirm({item, rows}) {
      this.$refs.selectorDialog.close()
      var en = ''
      var en_show_value = ''
      for (var i = 0; i < rows.length; i++) {
        en += rows[i][JSON.parse(item.type_config).key] + ','
        en_show_value += rows[i][JSON.parse(item.type_config).value] + ','
      }
      this.$set(this.data, item.en, en.substring(0, en.length - 1))
      this.$set(this.data, item.en + '_show_value', en_show_value.substring(0, en_show_value.length - 1))
    },
    clearSelector(en) {
      this.$delete(this.data, en)
      this.$delete(this.data, en + '_show_value')
    }
  }
}
</script>

<style>
  .vxe-form--item.is--span .vxe-select, .vxe-form--item.is--span .vxe-textarea {
      width: 7em;
  }
</style>
